<script>
import { getButtonAttribute } from '@/utils/common'
export default {
  name: 'ColumnButton',
  /**
   * @Author: zzp
   * @Description: jsx的组件的标识，必须参数
   */
  functional: true,
  props: {
    /**
     * @Author: zzp
     * @Date: 2019-11-07 15:54:21
     * @Description: buttonList按钮全局，length需要单独显示的按钮个数，默认为3个,rowColumn用于传递列表的({ row, column })的参数
     */
    buttonList: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    length: {
      type: Number,
      default: 3
    },
    rowColumn: {
      type: Object,
      default: () => {
        return {
          row: {},
          column: {}
        }
      },
      required: true
    }
  },
  // jsx渲染组件
  render: (h, context) => {
    let routerName = context.parent.$route.name
    let routerPermission = ''
    routerPermission = context.parent.$store.getters.permissionBtns[routerName]
    let buttonPermission = []
    if (routerPermission && routerPermission.length > 0) {
      buttonPermission = routerPermission.split(',')
    }
    let row = context.props.rowColumn.row
    let column = context.props.rowColumn.column
    function evil(fn) {
      var Fn = Function
      return new Fn('return ' + fn)()
    }
    let showButtonList = context.props.buttonList.filter(element => (buttonPermission.includes(element.permitName) && ((typeof (evil(element.display)) !== 'function') || element.display(row, column))))
    let buttonList = showButtonList.slice(0, context.props.length)
    let moreButtonList = showButtonList.slice(context.props.length, showButtonList.length)
    function buttonshow() {
      let value = false
      if (moreButtonList.length > 0) {
        value = true
      }
      return value
    }
    return [
      <span style= { { marginLeft: 0 } }>
        {
          buttonList.map(item => {
            return <el-button size='mini' type={ getButtonAttribute(item.permitName, 'type', item.type) } disabled={item.disabled} loading={item.loading} icon={item.icon} class={[item.className, 'table-button'].join(' ')} onClick={ () => item.method(row, column)}>{getButtonAttribute(item.permitName, 'name', item.name)}</el-button>
          })
        }
      </span>,
      <el-dropdown
        size='mini'
        split-button
        type='primary'
        class='table-button'
        style={buttonshow() ? { marginLeft: '10px' } : { display: 'none' }}
      >
        更多
        <el-dropdown-menu slot='dropdown' style='width:85px'>
          {moreButtonList.map((item) => {
            return (
              <el-dropdown-item
                divided
                disabled={item.disabled}
                icon={item.icon}
                nativeOnClick={() => item.method(row, column)}
              >
                {getButtonAttribute(item.permitName, 'name', item.name)}
              </el-dropdown-item>
            )
          })}
        </el-dropdown-menu>
      </el-dropdown>
    ]
  }
}
</script>
<style lang="scss" scoped>
.drop {
  margin-top: 5px;
  border-top: 1px solid #e8eaec;
  width: 100%;
  float: left;
  margin: 0;
  line-height: normal;
  padding: 7px 16px;
  clear: both;
  color: #515a6e;
  font-size: 12px !important;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}
.vxe-button.type--text:not(.is--disabled):hover {
  background-color: #ffffff;
}
</style>
<style>
.el-dropdown .el-dropdown__caret-button {
  border-bottom: none;
}
</style>
